<template>
    <div class="comment-content">
        <img src="./person.png" alt="" class="l">
        <div class="comment-center l">
            大师大师大师大师大师大师大师大师大师大师大师大师大师大师大师大师
            达到
        </div>
        <a href="###" class="r" @click="Addto(fabulous,'iconFabulous')">
            {{count}}
            <collection :cls="fabulous"></collection>
        </a>
    </div>
</template>

<script>
import collection from 'base/collection/collection'

export default {
    data(){
        return {
            fabulous:{
                a:'icon-icon_good',
                b:'icon-zan',
                iconState:false
            },
            count:1
        }
    },
    components:{
        collection
    },
    methods:{
        // Addto(定义的对象，标识符)
        Addto(icon,k){
            console.log(icon,k)
            icon.iconState = !icon.iconState
            //点赞
            if(k=='iconFabulous' && icon.iconState){
                console.log("赞")
                this.count++
            }else if(k=='iconFabulous' && !icon.iconState){
                console.log("取消赞")
                this.count--
            }
        },
    }
}
</script>

<style lang="stylus">
.comment-content
    position relative
    img.l
        width:32px;
        height:32px;
        border-radius:100%;
        overflow hidden; 
    a.r
        color:#999;
        position absolute
        top:0px;
        right:0px;
    .comment-center
        width:80%;
        background #F60;
        word-wrap:break-word
        padding-left:10px;
        text-align:left;
</style>

